import React, { useDeferredValue, useEffect, useMemo} from "react";
import { useState, useRef } from "react";
import List from "./20-List"

function App() {
    

    const [str,setStr] = useState('')
    

    //  延期更新数据
    const defferredValue = useDeferredValue(str)

    const memoList =useMemo(()=>{
        return <List str={defferredValue}></List>
    },[defferredValue])

  return (
    <div>
       <h1>App</h1>
       <input type="text"  value={str} onChange={e => {setStr(e.target.value)}} />
       {memoList}
       {/* <List str={str}></List> */}
    </div>
  )
}

export default App;